<template>
  <div class='header'>
    <!-- 天气 -->
    <div class='weather'>
      <!-- 天气对应图标(xue, lei, shachen, wu, bingbao, yun, yu, yin, qing) -->
        <span class='weather-box'>
          <span class="city" v-if='message&&message.location&&message.location.name'>{{message.location.name}}</span>
          <span class="centigradebox" v-if='message&&message.realtime&&message.realtime.temp'>{{message.realtime.temp}}℃</span>
        </span>
      <span class='Residential' @click="showPicker = true">
        <span class="Residentialname" v-show="ResidentialName">{{ResidentialName?ResidentialName:'请选择社区'}}</span>
        <i class="icondown iconfont icon-xiajiantou"></i>
      </span>
      <span class='seach'>
        <div class="iconseach-box">
          <i @click="goSeach" class="iconseach iconfont icon-sousuo"></i>
        </div>
      </span>
    </div>
    <!-- 小区选择  -->
    <van-popup v-model="showPicker" position="bottom">
      <van-picker
        show-toolbar
        :columns="columns"
        @cancel="showPicker = false"
        @confirm="onConfirm"
      />
    </van-popup>
  </div>
</template>

<script>
import { Picker,Popup } from 'vant';
import { strict } from 'assert';
export default {
  props:{
    list:{
      type:Array
    },
    defaultName:{
      type:String
    },
    message:{
      type:Object
    }
  },
  data () {
    return {
      Residential: '',
      ResidentialName:'',
      ResidentialId: null,
      showPicker: false,
      columns: [],
      address: '',
      getcity: '',
      cityname: '',
      temperature: '',
      weatherimg:'',
    }
  },
  watch: {
    //父组件的值html看起来能渲染出来，实际它之前渲染过一次空的了，所以要监听
    list(val, oldVal) {
      if (val !== oldVal) {
        this.columns= this.list
      }
    },
    // 默认值改变不这样做就等于直接修改了自己父级
    defaultName(val, oldVal){
      if(val !== oldVal){
        this.ResidentialName = this.defaultName
      }
     }     
  },
  created () {
      this.columns.forEach(list => {
        this.Residential = list.name
    });
  }, 
  methods: {
    goSeach(){
      this.$router.push('/seach')
    },
    onConfirm(list) {
      this.ResidentialName = list.name;
      this.ResidentialId = list.id
      this.showPicker = false;
      // 调用父级组件方法
      // this.$parent.Switching()
      // 调用父级组件方法并传参
      this.$emit('getContent', this.ResidentialId)
      console.log(this.ResidentialName)
      console.log('ID',this.ResidentialId)
    }
  },
  components: {
    [Picker.name]:Picker,
    [Popup.name]:Popup
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.weather{
  font-size: .32rem;
  background-color: #fff;
  font-weight: bold;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  width: 100%;
  height: 1rem;
  z-index: 888;
}
.weather .weather-box{
  margin-left: .3rem;
  display: flex;
  flex: 2;
  line-height: 1rem;
  color: #000;
}
.Residential{
  display: flex;
  flex: 2.5;
  color: #000;
  line-height: 1rem;
  text-indent: .1rem;
  text-align: left;
}
.Residentialname{
  text-align: center;
  flex: 4;
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  /*! autoprefixer: off */
  -webkit-box-orient: vertical;
  /* autoprefixer: on */
}
.weatherIcon{
  flex: 1;
  margin-right: .1rem;
  display: block;
  width: 100%;
  height: 100%;
}
.city{
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  /*! autoprefixer: off */
  -webkit-box-orient: vertical;
  /* autoprefixer: on */
  min-width: .7rem;
  max-width: 1.2rem;
}
.centigradebox{
  flex: 1;
  /* color: #655ca2; */
  font-size: .26rem;
}
.weather .seach{
  flex: 2;
}
.centigrade{
  color:#655ca2;
  font-size: .24rem;
}
.icondown{
  flex: 1;
  display: inline-block;
  text-align: center;
  margin-left: .1rem;
}
.iconseach-box{
  text-align: right;
  margin-right: .4rem;
  line-height: 1rem;
}
.iconseach{
  font-size: .38rem;
  color: #000;
}
</style>
